<template>
  <div class='container'>
<!-- 面包屑区域 ==================================================-->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="subjects.id && subjects.name">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{subjects.id ? subjects.name : ''}}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>
    <!-- 头部 -->
    <!-- 搜索框 ==================================================-->
  <el-card>
      <el-form style="padding:15px" :inline="true" class="demo-form-inline">
  <el-row type="flex" justify="space-between">
    <div>
      <el-form-item label="目录名称">
    <el-input  v-model="queryList.directoryName" clearable></el-input>
  </el-form-item>
  <el-form-item label="状态" style="margin-left:25px">
    <el-select v-model="queryList.state" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  </el-form-item>
  <el-form-item>
     <el-button size="small" @click="clear">清除</el-button>
  <el-button type="primary" size="small" @click="List">搜索</el-button>
  </el-form-item>
    </div>
    <!-- 新增目录 ==================================================-->
  <span>
        <el-button
        v-if="subjects.id && subjects.name"
         type="text"
         class="colright"
         icon="el-icon-back"
         @click="$router.back()">返回学科</el-button>
       <el-button
       type="success"
        size="small"
        @click="addialogVisible = true"
        >
          <i class="el-icon-edit"></i>添加目录
        </el-button>
  </span>
  </el-row>
    <!-- 提示总数据数量 ==================================================-->
  <el-alert type="info" style="height: 28px;">
            <template>
            <i class="el-icon-warning-outline"></i>
              <span>共{{ counts }}条数据</span>
            </template>
          </el-alert>
    <!-- 列表 ==================================================-->
   <el-table
      style="width: 100%"
      :data="list">
      <el-table-column
      type="index"
        label="序号"
        prop="id"
        >
      </el-table-column>
      <el-table-column
        label="所属学科"
        prop="subjectName"
       >
      </el-table-column>
      <el-table-column
        label="标签名称"
        prop="tagName"
        >
      </el-table-column>
      <el-table-column
        label="创建者"
        prop="username"
      >
      </el-table-column>
      <el-table-column
        label="创建日期"
        prop="addDate"
        >
        <template slot-scope="{ row }">
              <span>{{
                row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")
              }}</span>
            </template>
      </el-table-column>
       <el-table-column
        label="状态"
        prop="state"
        >
     <template slot-scope="{ row }">
       <span>
         {{row.state === 1 ? '已显示' : '禁用'}}
       </span>
     </template>

      </el-table-column>
      <el-table-column
        label="操作" >

        <template slot-scope="scope">
         <span class="abc">
           <el-link type="primary" @click="changeState(scope.row)">{{ scope.row.state === 1 ? '禁用' : '启用' }}</el-link>
         <el-link type="success" size="mini" :disabled="scope.row.state === 1" @click="ditTags(scope.row)" >修改</el-link>
         <el-link type="warning" :disabled="scope.row.state === 1" size="mini" @click="removeTag(scope.row)">删除</el-link>
         </span>
        </template>

      </el-table-column>
    </el-table>
     <!-- 分页区域 ==================================================-->

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 20, 50]"
      :pagesize="queryList.pagesize"
      :total="counts"
    >
    </el-pagination>

</el-form>
  </el-card>
    <!-- 添加弹层 ==================================================-->
    <TagsAdd
 :addialogVisible.sync="addialogVisible" :mulu="mulu"></TagsAdd>

  <!-- 修改标签弹框 ==================================================-->
    <el-dialog title="修改目录" :visible.sync="dialogVisible" width="20%">

      <el-row>
        <el-col>
          <el-form ref="tagsFormRef" :model="changeList" :rules="tagsFormRules" label-width="80px" class="demo-ruleForm">
            <el-form-item class="elform" label="所属学科">
              <el-select v-model="changeList.value" placeholder="请选择" style="width: 100%;">
                <el-option v-for="item in addFrom" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item class="elform" label="目录名称" prop="tagName">
              <el-input v-model="changeList.tagName" placeholder="请输入目录名称" style="width: 100%;"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editTagsForm">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
import { list, update, changeState, remove } from '@/api/hmmm/tags.js'
import TagsAdd from '@/module-hmmm/components/tags-add.vue'
import { simple } from '@/api/hmmm/subjects.js'

export default {
  name: 'Tags',
  components: {
    TagsAdd

  },
  data () {
    return {
      // 获取列表================================================
      list: [],
      // 修改的表单值============================================
      mulu: null,
      infoId: '',
      changeList: {

        value: '',

        tagName: ''

      },
      // 重置==================================================

      // 学科简单列表

      addFrom: [],
      // 请求标签数据参数=========================================
      queryList: {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: null

      },
      // 禁用启用================================================
      options: [{
        value: '1',
        label: '已显示'
      }, {
        value: '0',
        label: '禁用'
      }],
      value: '',
      input: '',

      // 显示隐藏=================================================
      dialogVisible: false,
      addialogVisible: false,

      // 添加验证=================================================
      tagsFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      // 数量====================================================
      counts: 0
    }
  },
  // 监听地址变化=================================================
  watch: {
    '$route.query' () {
      this.List()
    }
  },
  created () {
    this.List()
    this.getAddFrom()
    this.routeskip()
  },
  computed: {
    subjects () {
      return this.$route.query || null
    }
  },
  methods: {

    // 获取列表=======================================
    async List () {
      this.queryList.subjectID = this.subjects.id || null
      const { data } = await list(this.queryList)
      console.log(data)
      this.list = data.items
      // this.page.total = data.counts
      this.list = data.items
      this.counts = data.counts
      this.username = data.username
    },
    // 清除按钮==========================================
    clear () {
      this.queryList.directoryName = ''

      this.queryList.state = null

      this.List()
    },
    routeskip () {
      const mulus = this.$route.query.id
      this.mulu = mulus * 1
      console.log('mulus', this.mulu)
    },
    // 编辑============================================
    async editTagsForm () {
      try {
        if (this.subjects.id && this.subjects.name) {
          await update({

            id: this.infoId,

            subjectID: +this.subjects.id,

            tagName: this.changeList.tagName

          })

          this.$message.success('修改目录成功')

          this.dialogVisible = false

          this.List()
        } else {
          await update({

            id: this.infoId,

            subjectID: this.changeList.value,

            tagName: this.changeList.tagName

          })

          this.$message.success('修改目录成功')

          this.dialogVisible = false

          this.List()()
        }
      } catch (e) {
        console.log(e)
      }
    },

    // 修改========================================================
    async ditTags (row) {
      console.log(row)
      this.changeList.value = row.subjectName

      this.infoId = row.id

      this.changeList.tagName = row.tagName
      this.dialogVisible = true
    },
    // 获取学科简单列表================================================

    async getAddFrom () {
      try {
        const { data } = await simple()
        this.addFrom = data
      } catch (e) {
        console.log(e)
      }
    },

    // 修改状态===============================================
    async changeState (row) {
      console.log(row)
      try {
        await changeState({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (e) {
        this.$message.error('请求错误!')
      }
    },
    // 删除标签=================================================

    async removeTag (row) {
      // console.log(row)

      const configRuselt = await this.$confirm('此操作将永久删除该学科, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (configRuselt !== 'confirm') {
        return this.$message('您取消了删除操作!')
      }

      try {
        const { data } = await remove(row)
        console.log(data)
        this.$message.success('删除成功!')
        this.List()
      } catch (e) {
        this.$message.error('删除失败!')
      }
    },
    // 一页多少条
    handleSizeChange (newSize) {
      this.$emit('handleSizeChange', newSize)
      this.queryList.pagesize = newSize
      this.List()
    },

    // 多少页
    handleCurrentChange (newPage) {
      this.$emit('handleCurrentChange', newPage)
      this.queryList.page = newPage
      this.List()
    }

  }
}
</script>

<style scoped lang='scss'>
.demo-form-inline {
  background-color: #fff;
}

.el-link {
  margin-right: 15px;
}
.el-breadcrumb {
  padding: 0 15px;
}
.el-pagination {
  float: right;
}
</style>
